<!-- @format -->

<template>
  <view class="easyClear">
    <child-header-bar
      :childTitle="childTitle"
      @getMarginTop="getMarginTop"></child-header-bar>
    <view class="easyClear-content" :style="[{ top: top + 'px' }]">
      <view class="conyen">
        <view class="setContent">
          <button
            class="sculpture"
            open-type="chooseAvatar"
            @chooseavatar="onChooseAvatar">
            <view class="text">头像</view>
            <view class="userText">
              <image
                :src="
                  avatar === '' ? '../../../static/mine/profile.png' : avatar
                "
                mode="scaleToFill" />
            </view>
          </button>
          <view class="line"></view>
          <view class="sculpture" >
            <view class="userInfo">昵称</view>
         <!--<view class="userPhone">{{ user }} </view> -->   
		<input class="userPhone" v-model="user" placeholder="请输入昵称" />
		    <view class="button1" @tap="onSubmit" style="margin-top:40rpx">保存</view>
          </view>
          <view class="line" v-if="user"></view>
          <view class="sculpture">
            <view class="phone">手机</view>
            <view class="phoneNumber">{{ phonenumber }} </view>
          </view>
        </view>

        <view class="outLogin" @tap="logout">
          <text>退出登录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      childTitle: '设置',
      top: 68,
      phonenumber: 0,
      user: '',
      avatar: '',
      formData: {
        avatar: '',
        mobile: '',
      },
    }
  },
  onLoad() {
    let _this = this
    _this.phonenumber = uni.getStorageSync('phonenumber')
    let number = _this.phonenumber //获取到手机号码字段
    let mphone = number.substring(0, 3) + '****' + number.substring(7)
    _this.phonenumber = mphone
    _this.user = uni.getStorageSync('nickName')
    _this.avatar = uni.getStorageSync('avatar')
    console.log('11', _this.avatar)
  },

  methods: {
    // 动态接收导航栏高度
    getMarginTop(marginTop) {
      this.top = marginTop ? marginTop : 150
    },
	//2023-12-16 修改昵称
	onSubmit() {
	let that=this
	  uni.request({
	    url: that.$httpApi.install.updateUserName,
	    method: 'POST',
	    data:{
			phonenumber:uni.getStorageSync('phonenumber'),
			nickName:that.user
		},
	    success(res) {
	      console.log(res)
		  if(res.data.code==200)
		  {
			  
			  uni.setStorageSync('nickName', res.data.data.nickName)
			   uni.showToast({ icon: 'success', title: '昵称更新成功~' })
		  }
		  else{
			  uni.showToast({ icon: 'error', title: '昵称更新失败~' })
		  }
	   //   uni.setStorageSync('nickName', res.data.data.userId)

	      //判断数据返回后是否有结果

	    },
	    fail(error) {
	      uni.showToast({
	        icon: 'error',
	        title: '登录失败',
	        duration: 1000,
	      })
	    },
	  })
	  console.log(this.params)
	},
	
    // 退出登录
    logout() {
      let _this = this
      wx.showModal({
        title: '提示',
        content: '您确定要退出登录吗',
        success: function (res) {
          if (res.confirm) {
            //这里是点击了确定以后
            uni.setStorageSync('openid', '')
            uni.setStorageSync('mobile', '')
            uni.setStorageSync('nickName', '')
            uni.setStorageSync('phonenumber', '')
            uni.setStorageSync('userId', '')
            uni.setStorageSync('userName', '')
            uni.setStorageSync('loginTime', '')
            uni.setStorageSync('avatar', '')
            _this.loginFlag = false
            // 后退回到上一页
            setTimeout(() => {
              // 后退回到上一页
              uni.navigateBack({
                delta: 2,
              })
            }, 500)
          } else {
            //这里是点击了取消以后
            console.log('用户点击取消')
          }
        },
      })
    },

    onChooseAvatar(res) {
      console.log(res)
      let _this = this
      let mobile = this.phonenumber
      const avatar = res.detail.avatarUrl
      _this.formData.mobile = mobile
      _this.formData.avatar = avatar
      uni.uploadFile({
        url: _this.$httpApi.install.avaterInfo, // 接口地址
        name: 'avatar', // 接口参数名
        filePath: res.detail.avatarUrl, // 文件路径(接口参数值)
        formData: {
          avatar: res.detail.avatarUrl,
          mobile: uni.getStorageSync('phonenumber'),
        },
        // 请求成功
        success(res) {
          const obj = JSON.parse(res.data)

          // 更新用户头像
          _this.avatar = obj.url
          // 更新 Pinia 中存储的头像
          uni.setStorageSync('avatar', obj.url)
          // 提示用户
          uni.showToast({ icon: 'success', title: '头像更新成功~' })
          uni.navigateTo({
            url: '/pages/mine/mine',
          })
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.easyClear {
}
.button1 {
  width: 100rpx;
  text-align: center;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #303030;
}

button {
  border: none;
  margin: 0;
  padding: 0;
  outline: none;
  border-radius: 0;
  background-color: transparent;
  line-height: normal;
  color: #a4a4a4;
  font-size: 20rpx;
}

button::after {
  border: none;
}
.easyClear-content {
  position: absolute;
  height: 90vh;
  background-color: #f8fafe;
}

.conyen {
  width: 750rpx;
}

.setContent {
  margin-left: 30rpx;
  margin-top: 23rpx;
  width: 690rpx;
  // height: 340rpx;
  background: #fff;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  opacity: 1;
  padding: 45rpx 30rpx;

  .sculpture {
    display: flex;
    justify-content: space-between;
	align-items: center;
  }
  .line {
    margin-top: 22rpx;
    width: 630rpx;
    height: 1rpx;
    opacity: 0.3;
    border: 1rpx solid #91a4b2;
  }
  .text {
    font-size: 28rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    color: #595959;
    margin-top: 20rpx;
  }
  .userText {
    width: 68rpx;
    height: 68rpx;
    image {
      border-radius: 50%;
      width: 100%;
      height: 100%;
    }
  }

  .userInfo {
    margin-top: 40rpx;
    font-size: 28rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    color: #595959;
  }
  .userPhone {
    margin-top: 42rpx;
    font-size: 28rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    color: #a4a4a4;
  }
  .phone {
    margin-top: 35rpx;
    font-size: 28rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    color: #595959;
  }
  .phoneNumber {
    margin-top: 35rpx;
    font-size: 28rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    color: #a4a4a4;
  }
}
.outLogin {
  width: 689rpx;
  height: 88rpx;
  background: #303030;
  box-shadow: 0rpx 5rpx 10rpx 1rpx rgba(0, 0, 0, 0.1);
  border-radius: 50rpx 50rpx 50rpx 50rpx;
  opacity: 1;
  text-align: center;
  margin: 0 auto;
  margin-top: 700rpx;
  text {
    line-height: 88rpx;
    font-size: 36rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }
}
</style>
